<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
	<script src="js/vue.js"></script>
	<body>
		<div id="app">
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				firstName: 'Foo',
				lastName: 'Bar',
			},
			watch: {
				firstName: function(val){
					this.fullName = val+' '+this.lastName;
				},
				lastName: function(val){
					this.fullName = this.firstName+' '+val;
				}
			},
			computed: {
				fullName: {
					get: function(){
						return this.firstName+' '+this.lastName;
					},
					set: function(newValue){
						var names =newValue.split(' ');
						this.firstName = names[0];
						this.lastName = names[names.length-1];
					}
				}
			}
		})
	</script>
</html>
